<template>
  <div class="goods-list-container">
    <!-- 标题 -->
    <h2 class="recommend-title">精选好物推荐</h2>
    <!-- 商品列表 -->
    <div class="goods-grid">
      <div
          class="goods-item"
          v-for="(item, index) in goodsList"
          :key="index"
          @click="handleItemClick(item.id)"
      >
        <!-- 商品图片 -->
        <img
            :src="item.image_url"
            alt="goods"
            class="goods-img"
            @error="handleImageError(item)"
        >
        <!-- 商品名称 -->
        <p class="goods-name">{{ item.prod_name }}</p>
        <!-- 商品价格 -->
        <p class="goods-price">¥{{ item.price }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import picture from '../../assets/图片加载失败.png'
import ProductApi from '@/api/Product.js'
import {useRouter} from "vue-router";
const router = useRouter();
// 模拟商品数据，实际可从接口获取
const goodsList = ref([]);
onMounted(async () => {
  goodsList.value = await ProductApi.ProductSimpleList();
})
// 处理图片加载失败，显示默认占位图
const handleImageError = (item) => {
  item.image = picture; // 替换为你的默认图片地址
};
// 点击商品项，跳转到商品详情页面
const handleItemClick = (id) => {
  router.push({
    path: '/goods-detail',
    query: {id}
  })
}

</script>

<style scoped>
.goods-list-container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.recommend-title {
  font-size: 20px;
  font-weight: bold;
  color: #ff5722; /* 标题颜色，可根据设计调整 */
  margin-bottom: 20px;
}

.goods-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 商品项之间的间距 */
  justify-content: flex-start;
}

.goods-item {
  width: calc(20% - 20px); /* 一行展示5个，可根据需求调整，比如 25% 一行4个等 */
  box-sizing: border-box;
  text-align: center;
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.goods-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.goods-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

.goods-name {
  font-size: 14px;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 控制商品名称显示行数 */
  -webkit-box-orient: vertical;
}

.goods-price {
  font-size: 16px;
  color: #ff5722; /* 价格颜色，可按需调整 */
  font-weight: bold;
}

/* 响应式适配，不同屏幕宽度调整每行展示数量 */
@media (max-width: 1200px) {
  .goods-item {
    width: calc(25% - 20px);
  }
}

@media (max-width: 992px) {
  .goods-item {
    width: calc(33.333% - 20px);
  }
}

@media (max-width: 768px) {
  .goods-item {
    width: calc(50% - 20px);
  }
}

@media (max-width: 576px) {
  .goods-item {
    width: 100%;
  }
}
</style>